import React, { useRef, useState } from 'react'
import { Button, Input, message, Image } from 'antd';
import { addBannerFn } from '../../api/banner'


import { useNavigate } from 'react-router-dom';
export default function Index() {


    const navigate = useNavigate()

    const inpref = useRef()

    const [img, setimg] = useState('')
    const [alt, setalt] = useState('')
    const [link, setlink] = useState('')

    function changeImage(event) {
        // console.log(event.target.files[0]);

        // URL.createObjectURL   创建临时的 URL 地址用的 

        const reader = new FileReader()
        reader.readAsDataURL(event.target.files[0])
        reader.onload = () => {
            setimg(reader.result)
        }
    }


    function addClick() {
        // console.log(link, alt, img);
        addBannerFn({
            link, alt, img
        }).then(res => {
            if (res.code == 200) {
                message.success(res.message)

                setalt('')
                setimg('')
                setlink('')

                // 跳转页面
                navigate('/banner/list', {
                    state: {
                        title: '参数'
                    }
                })
            }
        })
    }
    return (
        <div>
            <h3>添加轮播图</h3>

            <Input
                type="text"
                placeholder="请输入 link"
                value={link}
                onChange={e => { setlink(e.target.value) }}
            />
            <br /><br /><br />
            <Input
                type="text"
                value={alt}
                onChange={e => { setalt(e.target.value) }}
                placeholder="请输入 alt"
            />
            <br /><br /><br />
            <input ref={inpref} hidden type='file' onChange={changeImage} />
            <Button onClick={() => {
                inpref.current.click()
            }}> 请选择图片 </Button>
            <br /><br /><br />
            <Image width={100} src={img}></Image>
            <br /><br /><br />
            <Button onClick={addClick}>添 加</Button>
        </div>
    )
}
